<template>
  <div class="gantt-wrapper">
    <gantt-chart
      :tasks="tasks"
      :date-range="dateRange"
      bar-height="30"
      @task-updated="handleTaskUpdate"
      @task-selected="handleTaskSelected"
    >
      <template #sidebar="{ task }">
        <div class="gantt-sidebar">
          <el-tag size="small">{{ task.type }}</el-tag>
          <span>{{ task.name }}</span>
        </div>
      </template>
      <template #tooltip="{ task }">
        <div class="gantt-tooltip">
          <p><strong>任务:</strong> {{ task.name }}</p>
          <p><strong>机器:</strong> {{ task.machine }}</p>
          <p><strong>开始:</strong> {{ formatDate(task.start) }}</p>
          <p><strong>结束:</strong> {{ formatDate(task.end) }}</p>
        </div>
      </template>
    </gantt-chart>
  </div>
</template>

<script setup>
import { GanttChart } from 'vue-ganttastic'

const props = defineProps({
  tasks: {
    type: Array,
    required: true
  },
  dateRange: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update-task'])

const handleTaskUpdate = (updatedTask) => {
  emit('update-task', updatedTask)
}

const handleTaskSelected = (task) => {
  console.log('Selected task:', task)
  // 这里可以添加任务详情弹窗逻辑
}

const formatDate = (date) => {
  return new Date(date).toLocaleString()
}
</script>

<style>
.gantt-wrapper {
  margin: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow-x: auto;
}

.gantt-sidebar {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gantt-tooltip {
  padding: 8px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
</style>